<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>问卷调查</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <div v-show="cur === 1">
            <h2>1.请问您的性别是：</h2>
            <input type="radio" v-model="form.sex" value="man" id="man" />
            <label for="man">男</label>

            <input type="radio" v-model="form.sex" value="woman" id="woman" />
            <label for="woman">女</label>

            <input type="radio" v-model="form.sex" value="secrecy" id="secrecy" />
            <label for="secrecy">保密</label>
        </div>
        <div v-show="cur === 2">
            <h2>2.请选择你的兴趣爱好：</h2>
            <input type="checkbox" v-model="form.interest" value="html" id="html" />
            <label for="html">HTML</label>

            <input type="checkbox" v-model="form.interest" value="js" id="js" />
            <label for="js">JavaScript</label>

            <input type="checkbox" v-model="form.interest" value="css" id="css" />
            <label for="css">CSS</label>
        </div>
        <div v-show="cur === 3">
            <h2>3.请介绍一下自己：</h2>
            <textarea v-model="form.introduce" placeholder="请输入..."></textarea>
        </div>
        <div>
            <input v-show="cur < 3" type="button" value="下一步" @click="next()">
            <input v-show="cur > 1" type="button" value="上一步" @click="prev()">
            <input type="button" value="重置" @click="reset()">
            <input type="button" value="提交" @click="submit()">
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            cur: 1,
            form: {
                sex: '',
                interest: [],
                introduce: ''
            }
        },
        methods: {
            next: function () {
                if (this.cur === 1 && !this.form.sex) {
                    alert("请问您的性别");
                } else if (this.cur === 2 && this.form.interest.length === 0) {
                    alert("请选择你的兴趣爱好");
                } else if (this.cur === 3 && !this.form.introduce) {
                    alert("请介绍一下自己");
                } else {
                    this.cur++;
                }
            },
            prev: function () {
                this.cur--;
            },
            reset: function () {
                this.cur = 1;
                this.form.sex = '';
                this.form.interest = [];
                this.form.introduce = '';
            },
            submit: function () {
                alert(JSON.stringify(this.form));
            }
        }
    })
</script>

</html>